<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>
<%
	request.setAttribute("title", "服务");
%>
<%@ include file="/WEB-INF/views/shared/master/weContentHeader.jsp"%>

<style>
	.weui-navbar {
		z-index: 0;
	}
	
	.search{
		padding:13px 5px;
		border-bottom:1px solid #d9d9d9;
	}
	
	#test{
        display: flex;
    }
    
    .weui-search-bar{
     margin:2px 10px;
    	padding:0px;
    }
    
    .weui-search-bar__label{
    	background-color: #eee;
    }
    
    .weui-search-bar__box{
   	    background-color: #eee;
    }
    
    
    .tab li{
		min-width:120px;
		/* width:20%; */
	}
	a{
		color:#000;
	}
	.claim-green-pipe .weui-grid{
		width:50%;
		padding: 5px 0px;
	}
    
    .news_item1{
    	margin:13px 13px 13px 13px;
    }
     .news_item2{
    	margin:13px 13px 13px 0px;
    }
    

    
    .grid-button {
		width: 24.9%;
	}
	.color-blue {
		color: #2196F3;
	}
	.weui-btn {
		font-size: 0.7rem;
		padding: 0;
		overflow: visible;
	}
	.weui-btn: after {
		border: 0;
	}
	.weui-btn_default {
		background-color: #fff;
	}
	.weui-btn_primary {
		background-color: #017cde;
	}
	.weui-btn_primary:not(.weui-btn_disabled):active {
	  	color: rgba(255, 255, 255, 0.6);
	  	background-color: #017cde;
	}
	.weui-grid {
		padding: 10px 5px;
	}
	.weui-grid:before {
		border: 0;
	}
	.weui-grid:after {
		border: 0;
	}
	.weui-grids {
		background-color: #fbfbfb;
	}
	.weui-grids:before {
		border: 0;
	} 
      
</style>

<%@ include file="/WEB-INF/views/shared/master/weTitle.jsp"%>

<div class="weui-flex search">
    <div class="weui-flex__item " style="flex-grow:2;justify-content: center;align-items:center; " id="test">
        <p>武汉</p>
    </div>

    <div class="weui-flex__item weui-search-bar " id="searchBar" style="flex-grow:7">
        <form class="weui-search-bar__form">
              <div class="weui-search-bar__box">
                  <i class="weui-icon-search"></i>
                  <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
                  <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
              </div>
              <label class="weui-search-bar__label" id="searchText" >
                   <i class="weui-icon-search"></i>
                   <span>搜索</span>
              </label>
         </form>
    </div>
</div>

<div>
	<div class="tab-container" data-id="claim-container" id="claim-tab">
		<ul class="tab tab-horizontal" style="width:800px">
			<li data-id="tab1" class="active">
				<span>生活服务</span>
			</li>
			<li data-id="tab2" class="">
				<span>汽车生活</span>
			</li>
			<li data-id="tab3" class="">
				<span>健康医疗</span>
			</li>
			<li data-id="tab4" class="">
				<span>旅游度假</span>
			</li>
			<li data-id="tab5" class="">
				<span>教育培训</span>
			</li>		
		</ul>
	</div>
</div>

<div id="claim-container">
	<div class="tab-content active" id="tab1">
		<div class="weui-flex">
    			<div class="weui-flex__item news_item1 " style="flex-grow:1;justify-content: center;align-items:center; " id="test">
        			<img style="width:100%;" src="<c:url value='/images/we/enterpriseInsurance/risk.png' />" />		
    			</div>
    			<div class="weui-flex__item news_item2" style="flex-grow:1;justify-content: center;align-items:center; " id="test">
        			<img style="width:100%;" src="<c:url value='/images/we/enterpriseInsurance/risk.png' />" />		
    			</div>
    		</div>
			
			<div>
			</div>
		<div class="weui-grids">
			<div class="weui-grid js_grid grid-button color-blue">
				<a href="javascript:;" class="weui-btn weui-btn_default">收纳整理</a>
			</div>
			<div class="weui-grid js_grid grid-button">
				<a href="javascript:;" class="weui-btn weui-btn_default">厨房用品</a>
			</div>
			<div class="weui-grid js_grid grid-button">
				<a href="javascript:;" class="weui-btn weui-btn_default">清洁卫生</a>
			</div>
			<div class="weui-grid js_grid grid-button">
				<a href="javascript:;" class="weui-btn weui-btn_default">家具日用</a>
			</div>
			<div class="weui-grid js_grid grid-button">
				<a href="javascript:;" class="weui-btn weui-btn_default">浴室用品</a>
			</div>
			
		</div>	
	</div>
	<div class="tab-content" id="tab2">
		<div class="weui-flex">
    			<div class="weui-flex__item news_item1 " style="flex-grow:1;justify-content: center;align-items:center; " id="test">
        			<img style="width:100%;" src="<c:url value='/images/we/enterpriseInsurance/risk.png' />" />		
    			</div>
    			<div class="weui-flex__item news_item2" style="flex-grow:1;justify-content: center;align-items:center; " id="test">
        			<img style="width:100%;" src="<c:url value='/images/we/enterpriseInsurance/risk.png' />" />		
    			</div>
    		</div>
			
		<div class="weui-grids">
			<div class="weui-grid js_grid grid-button color-blue">
				<a href="javascript:;" class="weui-btn weui-btn_default">汽车用品</a>
			</div>
			<div class="weui-grid js_grid grid-button">
				<a href="javascript:;" class="weui-btn weui-btn_default">洗车</a>
			</div>
			<div class="weui-grid js_grid grid-button">
				<a href="javascript:;" class="weui-btn weui-btn_default">汽车美容</a>
			</div>
			<div class="weui-grid js_grid grid-button">
				<a href="javascript:;" class="weui-btn weui-btn_default">维修保养</a>
			</div>
			
		</div>	
	</div>	
	<div class="tab-content" id="tab3">
		<div class="weui-flex">
    			<div class="weui-flex__item news_item1 " style="flex-grow:1;justify-content: center;align-items:center; " id="test">
        			<img style="width:100%;" src="<c:url value='/images/we/enterpriseInsurance/risk.png' />" />		
    			</div>
    			<div class="weui-flex__item news_item2" style="flex-grow:1;justify-content: center;align-items:center; " id="test">
        			<img style="width:100%;" src="<c:url value='/images/we/enterpriseInsurance/risk.png' />" />		
    			</div>
    		</div>
	    		
	    	<div class="weui-grids">
				<div class="weui-grid js_grid grid-button color-blue">
					<a href="javascript:;" class="weui-btn weui-btn_default">瑜伽舞蹈</a>
				</div>
			</div>
	</div>
	<div class="tab-content" id="tab4">
		<div class="weui-flex">
    			<div class="weui-flex__item news_item1 " style="flex-grow:1;justify-content: center;align-items:center; " id="test">
        			<img style="width:100%;" src="<c:url value='/images/we/enterpriseInsurance/risk.png' />" />		
    			</div>
    			<div class="weui-flex__item news_item2" style="flex-grow:1;justify-content: center;align-items:center; " id="test">
        			<img style="width:100%;" src="<c:url value='/images/we/enterpriseInsurance/risk.png' />" />		
    			</div>
    		</div>
			
			<div>
			</div>
		<div class="weui-grids">
			<div class="weui-grid js_grid grid-button color-blue">
				<a href="javascript:;" class="weui-btn weui-btn_default">景点门票</a>
			</div>
			<div class="weui-grid js_grid grid-button">
				<a href="javascript:;" class="weui-btn weui-btn_default">酒店</a>
			</div>			
		</div>	
	</div>
	<div class="tab-content" id="tab5">
		<div class="weui-flex">
    			<div class="weui-flex__item news_item1 " style="flex-grow:1;justify-content: center;align-items:center; " id="test">
        			<img style="width:100%;" src="<c:url value='/images/we/enterpriseInsurance/risk.png' />" />		
    			</div>
    			<div class="weui-flex__item news_item2" style="flex-grow:1;justify-content: center;align-items:center; " id="test">
        			<img style="width:100%;" src="<c:url value='/images/we/enterpriseInsurance/risk.png' />" />		
    			</div>
    		</div>
	    		
	    	<div class="weui-grids">
				<div class="weui-grid js_grid grid-button color-blue">
					<a href="javascript:;" class="weui-btn weui-btn_default">保险知识培训</a>
				</div>
			</div>
	</div>
	
	
</div>


<%@ include file="/WEB-INF/views/shared/scripts/jquery.jsp"%>
<%@ include file="/WEB-INF/views/shared/scripts/jqweui.jsp"%>
<%@ include file="/WEB-INF/views/shared/scripts/tabmob.jsp"%>
<script src="<c:url value='/plugins/jqweui/js/swiper.min.js'/>" type="text/javascript"></script>

<script type="text/javascript">
$(function(){
	$(".swiper-container").swiper({
		pagination: '.swiper-pagination',
	    paginationClickable: true,
		autoplay:10000
	});
});	
$(function(){
	$(".grid-button").click(function(){
		$(this).children().addClass("color-blue");
		$(this).siblings().children().removeClass("color-blue");
	});
});
</script>


<%@ include file="/WEB-INF/views/shared/master/weContentFooter.jsp"%>